<template>
    <div class="admin-dashboard">
      <h2>售后数据统计</h2>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card class="box-card">
            <div class="card-item">
              <p>总工单数</p>
              <h3>{{ stats.totalTickets }}</h3>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card">
            <div class="card-item">
              <p>待处理工单</p>
              <h3>{{ stats.pendingTickets }}</h3>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card">
            <div class="card-item">
              <p>已完成工单</p>
              <h3>{{ stats.completedTickets }}</h3>
            </div>
          </el-card>
        </el-col>
      </el-row>
  
      <el-card class="mt-20">
        <template #header>
          <div class="card-header">
            <span>近期工单概览</span>
          </div>
        </template>
        <el-table :data="recentTickets" style="width: 100%" v-loading="loading">
          <el-table-column prop="id" label="工单号" width="100"></el-table-column>
          <el-table-column prop="username" label="用户" width="120"></el-table-column>
          <el-table-column prop="ticketType" label="类型" width="120"></el-table-column>
          <el-table-column prop="description" label="描述"></el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="getStatusTagType(row.status)">{{ mapTicketStatus(row.status) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="submitDate" label="提交日期" width="120"></el-table-column>
        </el-table>
        <el-empty v-if="recentTickets.length === 0 && !loading" description="暂无工单数据"></el-empty>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { fetchAllServiceTickets } from '../../api'
  import { ElMessage } from 'element-plus';
  
  const stats = ref({
    totalTickets: 0,
    pendingTickets: 0,
    completedTickets: 0
  })
  
  const recentTickets = ref([])
  const loading = ref(false)
  
  const getStatusTagType = (status) => {
    switch (status) {
      case 'PENDING': return 'warning'
      case 'PROCESSING': return ''
      case 'COMPLETED': return 'success'
      case 'CLOSED': return 'info'
      default: return 'info'
    }
  }
  
  const mapTicketStatus = (status) => {
    const statusMap = {
      'PENDING': '待处理',
      'PROCESSING': '处理中',
      'COMPLETED': '已完成',
      'CLOSED': '已关闭'
    };
    return statusMap[status] || status;
  };
  
  onMounted(async () => {
    loading.value = true;
    try {
      const response = await fetchAllServiceTickets();
      if (response.data.success) {
        const tickets = response.data.data;
        stats.value.totalTickets = tickets.length;
        stats.value.pendingTickets = tickets.filter(t => t.status === 'PENDING').length;
        stats.value.completedTickets = tickets.filter(t => t.status === 'COMPLETED').length;
        recentTickets.value = tickets.sort((a, b) => new Date(b.submitDate) - new Date(a.submitDate)).slice(0, 5);
      } else {
        ElMessage.error(response.data.message || '获取工单数据失败！');
      }
    } catch (error) {
      ElMessage.error('加载工单数据出错！');
      console.error('Failed to fetch tickets:', error);
    } finally {
      loading.value = false;
    }
  })
  </script>
  
  <style scoped>
  .admin-dashboard {
    padding: 20px;
  }
  
  .box-card {
    text-align: center;
  }
  
  .card-item p {
    font-size: 16px;
    color: #666;
  }
  
  .card-item h3 {
    font-size: 32px;
    margin-top: 10px;
    color: #333;
  }
  
  .mt-20 {
    margin-top: 20px;
  }
  </style>